<script setup>
import {computed, ref} from 'vue';
import axios from 'axios';
import { showMsg } from '@/components/Util';

import permit from '@/components/app/permit.vue';
let props=defineProps(['role','type','title','permission'])
let emits=defineEmits(['submit','close'])

let obj=computed(()=>{
  return props.role;
})

// let obj = ref({
//     name:'',
//     xuehao:'',
//     sex:'',
//     mobile:'',
//     addr:''
// })
function sub(){
  axios.post('/api/add_role',obj.value,{
    headers:{
      "Content-Type":"application/json"
    }
  }).then(res=>{
    if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
  })
  
}

function edit(){
  axios.put('/api/role_update',obj.value,{
    headers:{
      "Content-Type":"application/json"
    }
  }).then(res=>{
    if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
  })
}

</script>

<template>

  <div class="box">
    <div class="title">
      <h3>{{ title }}</h3>
      <img src="../../img/错误.png" alt="" @click="emits('submit')">
    </div>
    <input type="text" placeholder="角色名称" v-model="obj.roleName">
    <input type="text" placeholder="描述" v-model="obj.remark">
    <!-- <div>系统管理</div> -->
    <permit v-model:zhi="obj.permitId"></permit>
  
    <input v-if="type=='new'" type="button" value="提交" @click="sub" class="sub">
    <input v-if="type=='edit'" type="button" value="提交修改" @click="edit" class="sub">
  </div>
</template>

<style scoped>
.box{
  width: 300px;
  height: 280px;
  border: 1px solid #eee;
  position: absolute;
  margin: 10% 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px #eee;
  cursor: pointer;
}
.box>.title{
  width: 280px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.box>.title>h3{
  color: #0aa;
}
.box>.title>img{
  width: 30px;
  height: 30px;
}
.box>input{
  width: 280px;
  height: 30px;
  border: none;
  background-color: #eee;
}
.box>.sub{
  width: 290px;
  height: 30px;
  background-color: #0aa;
  color:#fff;
  border: none;
}
.box .sex{
  width: 280px;
}
select{
  width: 280px;

}

</style>